{% load functions %}
{% load mptt_tags %}

          <div id="tree">
                <ul>
                {% recursetree nodes %}
                    <li id="id_{{node.id}}" style="width:98%;">
                        
                        <a href="#" style="width:300px;">{{ node.name }}</a>
                        <span class="dop_tree1_{{node.id}}">{{ node.slug }}</span>
                        <span class="dop_tree2_{{node.id}}">{{ node.created }}</span>
                        <span class="dop_tree3_{{node.id}}">
                            {% if node.active %}                            
                                <img alt='True' src='/media/img/admin/icon-yes.gif'>
                            {% else %}                                
                                <img alt='False' src='/media/img/admin/icon-no.gif'>
                            {% endif %}                                
                        </span>
                        <button style="margin-left:20px;">Content</button>
                        <button>Edit</button>
                        <button>Parent</button>
                        <button>Delete</button>
                        <script>
                        
                        var width = django.jQuery("#tree li").width(); 
                        var li_width = django.jQuery("#id_{{node.id}}").width();
                        var dop_width = 100 - (width - li_width);
                      
                        django.jQuery(".dop_tree1_{{node.id}}").attr("style", "margin-left:"+(dop_width)+"px;");
                        django.jQuery(".dop_tree2_{{node.id}}").attr("style", "margin-left:"+(dop_width)+"px;");
                        django.jQuery(".dop_tree3_{{node.id}}").attr("style", "margin-left:"+(dop_width)+"px;");
                      </script>                        
                        {% if not node.is_leaf_node %}
                        <ul class="children">
                            {{ children }}
                        </ul>
                        {% endif %}
                    </li>
                {% endrecursetree %}
                </ul>
            </div>

<script>
    django.jQuery(function () {
        django.jQuery("#tree").jstree({
            "themes" : {
                "theme" : "default"
            },
            "plugins" : [ "themes", "html_data", "ui", "checkbox", "dnd"]
        });
        
        django.jQuery("#tree").jstree("open_all");

    });
</script>

